<template>
  <div class="advisory_page">
    <Menus :title="name" />

    <div class="list-icon">
      <h2 class="intro">选择您要咨询的法律问题</h2>
      <ul>
        <li v-for="(item,key) in list"
            :key="'key-list-'+key">
          <a @click="handleClick(item, key)"
             v-if="key!='99'"><img :src="'/static/web/theme/gov_base_terminal/img/icon/advisory/'+item.icon"
                 alt="">
            <p>{{item.title}}</p>
          </a>
        </li>
      </ul>
    </div>
    <Dialogs v-model="dialog">
      <div class="body">
        <div style="text-align:center; font-size:20px; color:#999;">
          <p style="display:block;padding:0 0 20px;">公共法律服务平台向社会提供免费法律咨询服务，咨询仅限于普遍性的法律问题，如涉及具体个案或证据效力认定，则需要通过其他方式寻求法律服务。咨询结果仅供参考，咨询者自行承担相关法律责任。如接受，则进入法律咨询。</p>
        </div>
      </div>
      <template slot="foot">
        <a class="lp-btn large primary"
           @click="getToAdvice">接受</a>
        <a class="lp-btn large default"
           @click="dialog.show=false">取消</a>
      </template>
    </Dialogs>
  </div>
</template>
<script>
import Menus from '../components/Menu'
import advisory from '../datas/advisory'
import Dialogs from '../components/Dialog'
export default {
  data () {
    return {
      list: [],
      name: '',
      dialog: {
        show: false,
        title: '温馨提示'
      },
      select: {
        item: '',
        key: ''
      }
    }
  },

  methods: {
    handleClick (item, key) {
      this.select = {
        item,
        key
      }
      this.dialog.show = true
    },
    getToAdvice () {
      const { item, key } = this.select
      if (item && item.link) {
        location.href =
          item.link +
          '&all_log=' +
          this.$root.point.code +
          '_' +
          this.$root.point.no
        return false
      }
      this.$router.push({ path: `/zixun/${key}` })
    }
  },

  mounted () {
    this.list = advisory.lists
    this.name = advisory.title
  },

  components: {
    Menus,
    Dialogs
  }
}
</script>
<style lang="scss" scoped>
.advisory_page {
  padding-top: 1.6rem;
  background: #fff;
  min-height: 100vh;
}

@media screen and (orientation: portrait) {
  .list-icon ul li {
    width: 50% !important;
  }
}
@media screen and (orientation: landscape) {
}
</style>
